<template>
	<view class="container">
		<view id="try">
			<view class="rollbox" :class="{'box_rolling':isRolling}" @click="isRolling = !isRolling">
				<!-- 前面view -->
				<view class="rollbox_front">
					<view class="contentbox">
						<image mode="widthFix" class="person-img" :src="frontimg"> </image>
					</view>
				</view>
				<!-- 后面view -->
				<view class="rollbox_behind">
					<view class="contentbox">
						<image class="person-img" mode="widthFix" :src="backimg"> </image> 
					</view>
				</view>
			</view>
		</view>
  <view class="container">
    <view class="profile-section">
      <view class="name">{{name}}</view>
      <view class="title">{{job}}</view>
	  <view class="line"></view>
      <view class="description">你好！我是{{name}},华东师范大学的教育技术专业的在校生。在这里，我不仅学到了CS和教育学，还精通找到华东师范最好吃的饭，以及如何在考试周里优雅地变成一只夜猫子。如果你也喜欢吃饭、音乐和写小代码，欢迎联系我！</view>
    </view>
    <view class="contact-section">
      <view class="contact-info">Email: <text class="uniui-link">{{email}}</text></view>
      <view class="contact-info">Blog: <text class="uniui-link">http://www.ecnutravel.cn:3000/</text></view>
      <view class="contact-info">GitHub: <text class="uniui-link">https://github.com/youzizzz1028</text></view>
    </view>
    <view class="skills-section">
      <view class="skill">
        <text>HTML</text>
        <progress percent="80" show-info stroke-width="5"/>
      </view>
      <view class="skill">
        <text>CSS</text>
        <progress percent="70" show-info stroke-width="5"/>
      </view>
      <view class="skill">
        <text>JavaScript</text>
        <progress percent="85" show-info stroke-width="5"/>
      </view>
      <!-- Repeat for other skills -->
    </view>
  </view>
	</view>
</template>
	
		
	</view>

</template>
<script>

export default{
	name:'try',
	data(){
		return{
			isRolling:false,
			frontimg:'../../../static/card_rj.png',
			backimg:'../../../static/card_back.png',
			name:'李瑞佳',
			job:'见习ECNUer',
			email:'2720454825@qq.com',
		}
	},
	onLoad(config) {
		console.log(config);
		if(config.developer==2){
			this.frontimg='../../../static/card_yy.png'
			this.name='郭瑛英',
			this.email='709898554@qq.com'
		}
		
	}
}
</script>
<style lang="scss">
#try{
	.rollbox{
		position: relative;
    	perspective: 400px;
		width:calc(100%-20rpx);
		margin:10rpx;

    &_front,
    &_behind{
			transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
     		backface-visibility: hidden;  //元素背面向屏幕时是否可见
      		transition-duration:.5s;
  			transition-timing-function:'ease-in';
			.contentbox{
				width:100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
    }
    &_behind{
      transform: rotateY(180deg);
      visibility:hidden;  //元素不可见，但占据空间
      position: absolute;
      top:0;
      bottom:0;
      right: 0;
      left: 0;
    }
	}
	.box_rolling{
    .rollbox_front{
      transform: rotateY(180deg);
      visibility:hidden;
    }
    .rollbox_behind{
      transform: rotateY(360deg);
      visibility:visible;
    }
  }
  .person-img{
	  width:100%;
	  border-radius: 10rpx;
	  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  }
}
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.profile-section {
  text-align: left;
}
.profile-section .name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.profile-section .title {
  font-size: 16px;
  color: #555;
  margin-bottom: 5px;
}
.profile-section .description {
  font-size: 14px;
  color: #222;
  margin-bottom: 10px;
}
.contact-section {
  text-align: left;
  margin-top: 20px;
}
.contact-section .contact-info {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
.line{
	width:100%;
	height:2rpx;
	margin:10rpx 0rpx;
	background-color: #AAA;
}
.skills-section {
  text-align: left;
  margin-top: 20px;
}
.skills-section .skill {
  margin-bottom: 10px;
}
.progress {
	background-color: $uni-bg-color;
  /* Style your progress bar here */
}
.uniui-link{
	color:$uni-text-color-orange;
	margin:auto 10rpx;
}
</style>

